<style lang="less" scoped>
  @import '../style/runtodo/runtodo.less';
</style>

<template>
  <div class="image">
    <Button class="delButton" 
      type="error" 
      size="large" 
      shape="circle" 
      icon="ios-trash"
      @click.native="delTodoList"
      />
    <Clock class="clock"></Clock>
    <div class="header">
      <h1>RunTODO</h1>
      <span class="placeholder">{{placeholder}}</span><br>
      <input id="input" v-model="todo" @keyup.enter="addTodo" />
    </div>
    <div class="items">
      <Items ref="itemVue" class="items"></Items>
    </div>
    <div class="footer">

    </div>
  </div>
</template>

<script>
import * as LocalStorage from './localStorageUtil.js'
import Clock from '../view/components/clock/clock.vue'
import Items from './items.vue'
export default {
  data () {
    return {
      placeholder: 'What is your main focus for today?',
      todoStats: true,
      todo: '',
      todoList: [],
      todoLen: 0,
      untodoList: [],
      untodoLen: 0
    }
  },
  components: {
    Clock,
    Items
  },
  methods: {
    addTodo () {
      this.$refs.itemVue.addTodo(this.todo)
      this.todo = ''
    },
    delTodoList () {
      this.$refs.itemVue.delTodoList()
    }
  },
  mounted () {
    
  }
}
</script>

<style>

</style>
